<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{dt|dateFormat("")}}</h2>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				setInterval(function(){
					vm.timeMove();
				},1000)
			}
			//私有过滤器和全局过滤器名称一致，则优先调用私有过滤器
			Vue.filter("dateFormat",function(dateStr,pattern=""){
				var dt=new Date(dateStr)
				var y=dt.getFullYear()
				var m=dt.getMonth()+1
				var d=dt.getDate()
				if(pattern.toLocaleLowerCase()==="yyyy-mm-dd"){
					return `${y}-${m}-${d} ` 
				}else{
					var hh=dt.getHours()
					var mm=dt.getMinutes()
					var ss=dt.getSeconds()
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}` 
				}
			})
			var vm=new Vue({
				el:"#app",
				data:{
					dt:new Date()
				},
				methods:{
					timeMove:function(){
						this.dt=new Date()
					}
					
				},
				filters:{
					dateFormat:function(dateStr,pattern=""){
						var dt=new Date(dateStr)
						var y=dt.getFullYear()
						var m=(dt.getMonth()+1).toString().padStart(2,"0")
						var d=dt.getDate().toString().padStart(2,"0")
						if(pattern.toLocaleLowerCase()==="yyyy-mm-dd"){
							return `${y}-${m}-${d} ` 
						}else{
							var hh=dt.getHours().toString().padStart(2,"0")
							var mm=dt.getMinutes().toString().padStart(2,"0")
							var ss=dt.getSeconds().toString().padStart(2,"0")
							return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~~` 
						}
					}
				}
			});
		</script>
	</body>
</html>
